<!--
 * @Descripttion:
 * @revision:
 * @Author: YouHuJun
 * @Date: 2021-09-22 14:51:37
 * @LastEditors: youhujun 2900976495@qq.com
 * @LastEditTime: 2025-05-03 10:36:23
-->
<template>
  <div>
    <el-form
      ref="updateBrandListConfigForm"
      :model="updateBrandListConfigForm"
      :rules="updateBrandListConfigRules"
      label-width="150px"
      :inline="true"
      label-position="left"
      status-icon
      inline-message
      style="width:80%;margin-left:auto;margin-right: auto;padding:30px 20px;"
    >
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="品牌名称" prop="brand_name">
            <el-input v-model="updateBrandListConfigForm.brand_name" placeholder="品牌名称" class="input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="品牌logoid" prop="album_picture_id">
            <uploadSinglePicture :limit-number="1" :picture-id.sync="updateBrandListConfigForm.album_picture_id" show-content="上传logo" :upload-data="{id:0, use_type:20, file_type: '', save_path: 'logo'}" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="品牌类型">
            <el-select v-model="updateBrandListConfigForm.barnd_type" placeholder="请选择">
              <el-option label="自营" :value="10" />
              <el-option label="经营" :value="20" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="品牌编码" prop="brand_code">
            <el-input v-model="updateBrandListConfigForm.brand_code" placeholder="品牌编码" class="input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="24">
          <el-form-item label="属性备注" prop="note">
            <el-input v-model="updateBrandListConfigForm.note" placeholder="属性备注" class="input" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="16">
          <el-form-item label="排序" prop="sort">
            <el-input v-model="updateBrandListConfigForm.sort" class="input" />
          </el-form-item>
        </el-col>
        <el-col :span="8" style="vertical-align: middle;line-height:40px;">数值越大,顺序靠前,默认100</el-col>
      </el-row>
      <el-row type="flex" justify="center" style="margin-top:30px">
        <el-col :span="12" :offset="4">
          <el-form-item>
            <el-button type="primary" @click="submitForm('updateBrandListConfigForm')">修改配置项</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="4">
          <el-form-item>
            <el-button @click="resetForm('updateBrandListConfigForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import uploadSinglePicture from '@/pages/component/laravel-fast-api/v1/upload/uploadSinglePicture'
import { updateGoodsBrand } from '@/api/youhu-shop/V1/goods/goodsBrand'
import { debounce } from '@/utils'
export default
{
  // 组件名称
  name: 'UpdateBrandListConfigForm',
  components: {
    uploadSinglePicture
  },
  // 组件
  props:
    {
      beforeBrandListConfigForm: {
        type: Object,
        default: null
      }
    },
  // 数据
  data()
  {
    return {
      // 添加菜单表单
      updateBrandListConfigForm: {
        id: 0,
        // 品牌名称
        brand_name: '',
        // 品牌编码
        brand_code: '',
        // 品牌logoid
        album_picture_id: null,
        // 品牌类型 10自营 20经营
        barnd_type: '',
        // 备注
        note: '',
        // 排序
        sort: 100

      },
      // 添加表单规则
      updateBrandListConfigRules: {
        brand_name: [
          { required: true, message: '请输入品牌名称', trigger: 'blur' }
        ],
        sort: [
          { pattern: /^[0-9]{1,10}$/, message: '只能0-9的数字', trigger: 'blur' }
        ]
      }
    }
  },
  // 计算属性
  computed:
  {
  },
  // 监听
  watch:
  {
    beforeBrandListConfigForm: {
      handler(value)
      {
        this.updateBrandListConfigForm['id'] = value.id
        this.updateBrandListConfigForm['sort'] = value.sort
        this.updateBrandListConfigForm['note'] = value.note
        this.updateBrandListConfigForm['brand_name'] = value.brand_name
        this.updateBrandListConfigForm['brand_code'] = value.brand_code
        this.updateBrandListConfigForm['barnd_type'] = value.barnd_type
        this.updateBrandListConfigForm['album_picture_id'] = value.album_picture_id
      },
      deep: true,
      immediate: true
    }
  },
  // 实例创建之前
  beforeCreate()
  {

  },
  // 创建
  created()
  {

  },
  // 挂载之前
  beforeMount()
  {

  },
  // 挂载 --常用
  mounted()
  {

  },
  // 更新之前
  beforeUpdate()
  {
  },
  // 跟新后
  updated()
  {
  },
  // 销毁之前
  beforeDestroy()
  {
  },
  // 销毁后
  destroyed()
  {
  },
  // 方法
  methods:
  {
    initBrandListConfigForm()
    {
      this.$refs.updateBrandListConfigForm.resetFields()
    },
    // 提交表单
    submitForm: debounce(function(formName)
    {
      this.$refs[formName].validate((valid) =>
      {
        if (valid)
        {
          this.updateGoodsBrand(this.updateBrandListConfigForm)
        }
        else
        {
          console.log('未通过验证!')
          return false
        }
      })
    }, 600),

    // 重置表单
    resetForm(formName)
    {
      this.initBrandListConfigForm()
    },

    /**
     * 更新菜单
     */
    updateGoodsBrand(data)
    {
      const that = this
      updateGoodsBrand(data).then(res =>
      {
        if (res && res.code === 0)
        {
          that.$emit('handleCloseDialog', false)
          that.$message(
            {
              message: res.msg,
              type: 'success'
            })
          that.initBrandListConfigForm()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
/**表单 */
.select,
.input {
  width: 300px;
}
</style>
